<template>
  <div>
    <el-form size="small" inline>
      <el-form-item>
        <el-button size="small" type="text" icon="el-icon-refresh" @click="readLogs">刷新</el-button>
        <el-button size="small" type="text" icon="el-icon-delete" @click="cleanLogs">清空</el-button>
      </el-form-item>
      <el-form-item>
        <el-checkbox size="small" icon="el-icon-down" v-model="scrollToEnd">滚动到底部</el-checkbox>
      </el-form-item>
      <el-form-item label="刷新间隙">
        <el-input size="small" style="width: 250px;" v-model="interval" :disabled="refreshInterval">
          <span slot="append">
            <el-checkbox size="small" v-model="refreshInterval" @change="changeRefreshState">持续刷新</el-checkbox>
          </span>
        </el-input>

        {{parseTime(lastRefreshTime)}}
      </el-form-item>
    </el-form>
    <pre ref="output" style="max-height: 100%" class="scroll-console" @scroll="onScroll">{{logs}}</pre>

    <back-to-top/>
  </div>
</template>

<script>
import maven from '@/api/maven'

import {parseTime} from '@/utils'
import BackToTop from '@/components/BackToTop/index'

export default {
  name: 'mavenExecGoal',
  components: { BackToTop },
  props: {
    filePath: String
  },
  data(){
    return {
      logs: null,
      timer : null,
      scrollToEnd: true,
      refreshInterval: true,
      interval: 5000,
      lastRefreshTime: 0
    }
  },
  methods:{
    parseTime,
    changeRefreshState(state){
      if (state){
        this.startInterval()
      }else{
        this.stopInterval()
      }
    },
    onScroll(e){
      // console.log(e)
      // 当滚动时, 取消自动到底部, 需要防止抖动
      let { target } = e;
      if (Math.abs(target.scrollTop - target.scrollHeight) > 200){
        // 如果移动了 200px 才取消滚动到底部
        this.scrollToEnd = false
      }

      // 如果滚动到底部了, 则还是还原自动底部
      if (target.scrollTop + target.offsetHeight >= target.scrollHeight){
        this.scrollToEnd = true
      }
    },
    readLogs(){
      if (this.filePath){
        maven.executeLogManager.readLog(this.filePath).then(res => {
          this.logs = res.data

          this.lastRefreshTime = new Date().getTime()

          if (this.scrollToEnd){
            if (this.$refs.output){
              this.$refs.output.scrollTop = this.$refs.output.scrollHeight
            }
          }
        })
      }

    },
    stopInterval(){
      if (this.timer){
        window.clearInterval(this.timer)
      }
    },
    startInterval(){
      if (this.refreshInterval){
        // 使用定时任务进行刷新
        if (this.timer){
          // 清掉上一个定时器
          window.clearInterval(this.timer)
        }

        this.timer = setInterval(this.readLogs,this.interval)
      }else{
        console.warn('停止了自动更新')
      }

    },
    cleanLogs(){
      this.logs = null
    },
    init(){
      this.cleanLogs()

      this.readLogs()

      this.startInterval()
    }
  },
  mounted() {
  },

  destroyed() {
    this.stopInterval()
  },
  watch: {

  }

}
</script>

<style scoped>
.scroll-console{
  height: calc(100vh - 200px);
  overflow-y: scroll;
}
</style>
